<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>点击显示内容</title>
    <style>
        /* 隐藏开关 */
        .toggle-switch {
            display: none;
        }

        /* 触发按钮样式 */
        .toggle-btn {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            cursor: pointer;
            border: none;
            border-radius: 4px;
        }

        .toggle-btn:hover {
            background: #0056b3;
        }

        /* 初始隐藏目标内容 */
        .target-content {
            display: none;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 点击后显示目标内容（相邻兄弟选择器确保关联正确） */
        .toggle-switch:checked + .toggle-btn + .target-content {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 开关（隐藏） -->
    <input type="checkbox" class="toggle-switch" id="toggle">

    <!-- 触发按钮（通过for关联开关ID） -->
    <label for="toggle" class="toggle-btn">点击显示内容</label>

    <!-- 目标内容（默认隐藏） -->
    <div class="target-content">
        这是点击后才显示的内容！再次点击按钮会隐藏我哦~
    </div>
</body>
</html>